.ngg-checkbox {
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 1px solid var(--font-primary-color);
    position: relative;
    border-radius: 3px;
    vertical-align: middle;
    box-sizing: border-box;
    transition: border-color ease .2s;
}

.ngg-checkbox .checked:before {
    /*  -webkit-box-shadow: 1px 0 0 3px #f3f3f3;
      box-shadow: 1px 0 0 3px #f3f3f3;*/
    top: 10px;
    left: 9px;
    -webkit-transform: rotate(-130deg) scale(.8);
    transform: rotate(-130deg) scale(.8);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-animation: lcchekedkeyframetop .2s ease 0s forwards;
    animation: lcchekedkeyframetop .2s ease 0s forwards;
}

.ngg-checkbox .checked:after {
    border-radius: 5px;
    top: 4px;
    left: 3px;
    -webkit-transform: rotate(-38deg) scale(.8);
    transform: rotate(-38deg) scale(.8);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-animation: lcchekedkeyframebottom .1s ease 0s forwards;
    animation: lcchekedkeyframebottom .1s ease 0s forwards;
}

.ngg-checkbox .checked:before, .ngg-checkbox .checked:after {
    content: '';
    background: var(--font-input-color);
    position: absolute;
    width: 2px;
    height: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ant-checkbox-wrapper {
     color: var(--font-label-color);
}

@keyframes lcchekedkeyframetop {
    0%, 50% {
        height: 0
    }
    100% {
        height: 17px
    }
}

@keyframes lcchekedkeyframebottom {
    0% {
        height: 0
    }
    100% {
        height: 10px
    }
}


.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: var(--border-hover-color);
}
.ant-checkbox-inner {
    color: var(--font-input-color);
    background-color: var(--input-bg-color);
    border: 1px solid var(--border-hover-color);
}
.ant-checkbox-checked .ant-checkbox-inner {
    color: var(--input-bg-color);
    background-color: var(--font-input-color);
    border-color: var(--border-hover-color);
}
.ant-checkbox-checked .ant-checkbox-inner::after {
    border-color: var(--border-default-color);
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
    color: var(--input-bg-color);
    background-color: var(--font-input-color);
    border-color: var(--border-hover-color);
}
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: var(--input-bg-color);
}
